<template>
  <div class="home-container">
    <el-card class="card">
      <div>
        <h2>模型介绍： 船</h2>
        <h3>制作难度： 易</h3>
        <h3>制作时间： 半月</h3>
        <h4>
          例-模型链接：
          http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/obj/%E8%88%B9.obj
        </h4>
        <h4>材质链接：把↑上面那个链接后缀改mtl</h4>
      </div>
      <el-button @click="mxget = true">获取模型信息</el-button>

      <el-dialog
        title="请提供模型链接"
        :visible.sync="mxget"
        width="30%"
        :before-close="handleClose"
      >
        <el-input v-model="mxlink.mxobjlink" placeholder="请输入模型obj链接"></el-input>
        <el-input v-model="mxlink.mxmtllink" placeholder="请输入模型mtl链接"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="mxget = false">取 消</el-button>
          <el-button type="primary" @click="mxget = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>

    <model-obj
      :src="mxlink.mxobjlink"
      :mtl="mxlink.mxmtllink"
    ></model-obj>
  </div>
</template>

<script>
import { ModelObj } from "vue-3d-model";
// import * as THREE from "three";
// import  OrbitControls  from "three-orbitcontrols";
// import { OBJLoader ,MTLLoader } from "three-obj-mtl-loader";

export default {
  name: "ThreeFor",
  data() {
    return {
      mesh: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null,
      mxget: false,
      mxlink: {
        mxobjlink: '',
        mxmtllink: ''
        
      }
    };
  },
  components: { ModelObj },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
        console.log(this.mxlink);
    },
  },
};
</script>

<style scoped>
.card {
  opacity: 0.8;
  height: 380px;
  width: 280px;
  position: absolute;
  margin: 88px;

  word-break: break-all;
  word-wrap: break-word;
  white-space: normal;
  color: #409eff;
}
.home-container {
  z-index: -9;
  height: 100%;
  width: 100%;
  overflow: auto;
  /* overflow-y: scroll; */
  /* position: absolute; */
  background: linear-gradient(to right top, #a8edea, #fed6e3);
  /* opacity: 0.6; */
}
</style>
